<template>
  <view class="page">
    <u-navbar @leftClick="navLeftClick" :fixed="false" title="我的收藏" placeholder bgColor="#fff"></u-navbar>
    <view class="goods-list" v-if="list.length">
      <view class="goods-item" v-for="item in list" :key="item.id">
        <view class="goods-img" @click="collect(item.productId)">
          <image :src="item.subtitle?item.subtitle.split(',')[0]:''" mode="aspectFill" />
          <view class="mask">
            <image style="width: 28rpx;height: 26.53rpx;" src="../../static/my/myCollection.png" />
            <view>取消收藏</view>
          </view>
        </view>
        <view class="goods-info" @click="jumpTo('/pages/goodsDetail/goodsDetail?id='+item.productId)">
          <view style="height: 88rpx;" class="u-line-2 u-font-28">{{ item.title }}</view>
          <view class="u-flex u-row-between">
            <view class="u-font-28" style="color: #C50000;">¥ {{ (item.priceCents/100).toFixed(2) }}</view>
            <view class="u-font-24">仅剩{{ item.stock }}件</view>
          </view>
        </view>
      </view>
    </view>
    <a-empty v-else></a-empty>
  </view>
</template>

<script>
import { getCollectList, delCollectGoods } from '@/api/index'

export default {
  data() {
    return {
      pagesNum: 1,
      pages: 1,
      list: [],
    };
  },
  onLoad() {
    this.getPage()
  },
  methods: {
    getPage() {
      uni.showLoading({ mask: true })
      getCollectList({ pageSize: 200, pageNum: this.pagesNum, userId: uni.getStorageSync('userInfo').userId }).then(res => {
        uni.hideLoading()
        this.list = [...this.list, ...res.rows]
        this.pages = Math.ceil(res.total / 200)
      })
    },
    collect(productId) {
      uni.showLoading({ mask: true })
      delCollectGoods({ userId: uni.getStorageSync('userInfo').userId, productId: productId }).then(res => {
        uni.hideLoading()
        uni.showToast({
          title: '取消收藏成功',
          icon: 'none',
          mask: true
        })
        this.getPage()
      })
    },
  },
  onReachBottom() {
    if(this.pagesNum < this.pages) {
      this.pagesNum++
      this.getPage()
    }
  }
};
</script>

<style lang="scss" scoped>
.page {
  width: 750rpx;
  min-height: 100vh;
  background-color: #F5F5F5;
  padding-bottom: 80rpx;
  position: relative;
  .goods-list {
    width: 702rpx;
    margin: 0 auto;
    margin-top: 12rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12rpx;
    .goods-item {
      padding: 20rpx 16rpx;
      width: 100%;
      background: #FFFFFF;
      border-radius: 12rpx;
      display: flex;
      gap: 20rpx;
      .goods-img {
        flex-shrink: 0;
        width: 180rpx;
        height: 180rpx;
        background: rgba(0,0,0,0.4);
        border-radius: 4rpx;
        position: relative;
        image {
          width: 100%;
          height: 100%;
        }
        .mask {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 4rpx;
          font-size: 20rpx;
          color: #FFFFFF;
          background: rgba(0,0,0,0.4);
        }
      }
      .goods-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 12rpx;
        justify-content: space-between;
      }
    }
  }
}
</style>
